import React, {useRef} from 'react';
import {Button} from 'antd';
import {GTable} from 'geminis-react';

export default () => {
  const table = useRef();

  const loadData = () => {
    table.current.loadData({time: Date.now()});
  }

  const schema = {
    headerTitle: 'CRUD操作',
    data: {
      url: '/api/users',
      filter: {
        type: 'manual'
      }
    },
    manualRequest: true,
    pagination: {
      defaultPageSize: 5,
    },
    columns: [
      {
        title: 'Name',
        dataIndex: 'name',
        filterType: 'text',
      },
      {
        title: 'Age',
        dataIndex: 'age',
        search: false,
      },
      {
        title: 'Title',
        dataIndex: 'data',
        filterType: 'date',
        render: (data) => data.title,
      },
      {
        title: 'Birthday',
        dataIndex: 'birthday',
        valueType: 'date',
      },
    ],
  };

  return (
    <>
      <Button onClick={loadData}>Load Data</Button>
      <GTable ref={table} schema={schema}/>
    </>
  );
};
